<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
  let vnode = {
    tag: 'div',
    props: {
      onClick: () => {
        console.log('click me');
      }
    },
    children: 'click me'
  }

  const renderer = (vnode, container) => {
    const {tag, props, children} = vnode
    const el = document.createElement(tag)
    for (const key in props) {
      if (/^on/.test(key)) {
        el.addEventListener(
          key.substr(2).toLowerCase(),
          props[key]
        )
      }
    }

    if (typeof children === 'string') {
      el.appendChild(document.createTextNode(children))
    } else if (Array.isArray(children)) {
      children.forEach(child => render(child, el))
    }

    container.appendChild(el)
  }

  renderer(vnode, document.getElementById('app'))
</script>
</body>
</html>
